<template>
  <div class="mainLeft">
    <div style="display: flex;height: 5%;flex-basis: 5%;width:100%;align-items: center;margin-left: 10px">
      <div>全市</div>
      <i class="el-icon-caret-right"></i>
    </div>
    <div class="content" v-for="item in contentList" :key="item.id">
      <div style="display: flex;width:30%;flex-basis: 30%;justify-content: center;">
        <el-image :src="item.url" style="width: 20px;height: 23px;margin-right: 10px"></el-image>
      </div>
      <div style="display: flex;width:70%;flex-basis: 70%;flex-direction: column;align-items: flex-start;">
<!--        <div>-->
          <div>{{item.name}}</div>
          <div><span style="font-size: 22px;font-weight: 900;margin:10px 10px 10px 0">{{item.acount}}</span>{{item.unit}}</div>
<!--        </div>-->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "mainLeftContent",
  data(){
    return{
      contentList:[{
        id:0,
        name:'巡检',
        url:require('@/assets/images/dataScreen/xjIcon.png'),
        acount:'3',
        unit:'起'
      },{
        id:1,
        name:'检漏',
        url:require('@/assets/images/dataScreen/jlIcon.png'),
        acount:'0',
        unit:'起'
      },{
        id:2,
        name:'漏水事件',
        url:require('@/assets/images/dataScreen/lsIcon.png'),
        acount:'0',
        unit:'起'
      },{
        id:3,
        name:'停水地点',
        url:require('@/assets/images/dataScreen/tsIcon.png'),
        acount:'0',
        unit:'个'
      },{
        id:4,
        name:'投诉事件',
        url:require('@/assets/images/dataScreen/tousuIcon.png'),
        acount:'0',
        unit:'处'
      }],
    }
  }
}
</script>

<style lang="scss" scoped>
.mainLeft{
  color: white;
  display: flex;
  height:70%;
  flex-basis: 100%;
  flex-direction: column;
  width: 100%;
  background-image: url(~@/assets/images/dataScreen/mainLeft.png);
  background-size: 100% 100%;
  .content{
    display: flex;
    height: 19%;
    flex-basis: 19%;
    width: 100%;
    align-items: center;
    justify-content: center;
  }
}
</style>
